import React, { useRef, useState } from 'react'

function App() {
    const containerElementRef = useRef(null);
    // dom模板的编译 -> 数据的浇灌 -> react.cerateElement  虚拟DOM + render
    // renderDOM
    const [message, setMessage] = useState(
        "Click Button tO get container width"
    )
    const calculateContainerWith = () => {
        setMessage(`Container width:
        &{containerElementRef.current.clientWidth}`)
    }
    return (
        <div>
            <div className='container' ref={containerElementRef}>
                <h2>{message}</h2>
                <button onClick={calculateContainerWith}>
                    Calculate container width</button>
            </div>
        </div>
    )
}

export default App